// 支付成功页面
<template>
  <div>
    <nav-login></nav-login>

    <div class="cartStep">
      <cart-logo></cart-logo>
      <cart-step :steps="steps"></cart-step>
    </div>

    <div class="w1200">
      <div class="contentk">
        <h3>
          <span class="el-icon-success"></span>已成功下单，您选择了
          <i>线下支付</i>，请做好收货准备！
        </h3>
        <!-- <h3>订单金额：
          <bdi>¥301.90</bdi>
        </h3> -->
      </div>
      <div class="automaticSkip">
        <h1>
          <span class="el-icon-loading"></span>
          <i>{{time}}</i>秒后跳转到首页
        </h1>
      </div>
    </div>

    <bottom-nav></bottom-nav>
    <home-footer></home-footer>
  </div>
</template>
<script>
import cartStep from "../shoppingCart/components/CartStep" // 步骤
import cartLogo from "../shoppingCart/components/Logo" // logo
export default {
  name: "paymentSuccess",

  data() {
    return {
      steps: 4,
      time: 30
    }
  },

  components: {
    cartStep,
    cartLogo
  },

  mounted() {
    let timer = setInterval(() => {
      if (this.time > 0) {
        this.time--
      } else {
        clearInterval(timer)
        this.$router.push("/")
      }
    }, 1000)
  }
}
</script>
<style lang="scss" scoped>
.cartStep {
  width: 1200px;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.w1200 {
  width: 1200px;
  margin: auto;
  // margin-bottom: 31.1vh;
  .contentk {
    width: 100%;
    height: 130px;
    border: 1px solid #e2e2e2;
    h3 {
      &:first-child {
        padding-left: 36px;
        line-height: 36px;
        margin-top: 24px;
      }
      &:last-child {
        padding-left: 58px;
        line-height: 36px;
      }

      span {
        color: #ff9000;
        padding-right: 5px;
      }
      i {
        color: #ff9000;
      }
      bdi {
        color: #ff0000;
      }
    }
  }
  .automaticSkip {
    width: 100%;
    height: 31.1vh;
    text-align: center;
    color: rgb(226, 224, 220);
    font-size: 44px;
    line-height: 31.1vh;
    letter-spacing: 25px;
    span {
      padding-right: 20px;
    }
  }
}
</style>
